import React, { useEffect } from 'react';
import { Modal, Form, Input, Select, Alert } from 'antd';
import { useIntl } from 'umi';

const Recharge: React.FC<{}> = (props: any) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const { open, hideModal, listData, form } = props; //  listData 接受父组件列表的数据

  const content = listData.content;
  const { TextArea } = Input;

  useEffect(() => {
    form.setFieldsValue({
      accountBalance: content,
    });
  }, [listData]);

  return (
    <div>
      <Modal
        title={t('buttons.Recharge')}
        // title="充值"
        open={open}
        onOk={hideModal}
        onCancel={hideModal}
        // okText="确认"
        // cancelText="取消"
        okText={t('buttons.confirm')}
        cancelText={t('buttons.cancel')}
        style={{
          top: 20,
          paddingTop: '10px',
        }}
      >
        <Alert
          // message="完整银行卡号为 : 银行代码 + 分行号 + 账号"
          message={t('message.CartMessage')}
          type="warning"
          banner
        />
        <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
          style={{ marginTop: '10px' }}
        >
          <Form.Item
            // label="支付方式"
            label={t('form.Paymentmethod')}
            name="withdrawalAmount"
          >
            <Select mode="multiple">
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            // label="户名"
            label={t('form.Accountname')}
            name="accountBalance"
          >
            <Input />
          </Form.Item>
          <Form.Item
            // label="账号"
            label={t('form.AccountNo')}
            name="withdrawalMoney"
          >
            <Input />
          </Form.Item>
          <Form.Item
            // label="银行名称"
            label={t('form.Bankname')}
            name="withdrawalount"
          >
            <Input />
          </Form.Item>
          <Form.Item
            // label="银行地址"
            label={t('form.Bankaddress')}
            name="lockedParty"
          >
            <Input />
          </Form.Item>
          <Form.Item label="SWIFT CODF" name="withdrawalAmot">
            <Input />
          </Form.Item>
          <Form.Item
            //  label="银行代码"
            label={t('form.bankcode')}
            name="widrsdawalAmount"
          >
            <Input />
          </Form.Item>
          <Form.Item
            // label="分行号"
            label={t('form.BranchNo')}
            name="withdr1awalAmount"
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Recharge;
